<script setup>
const {proxy} = getCurrentInstance()
const deptList = ref([])
const deptTotal = ref(0)
const deptDialogOpen = ref(false)
const deptDialogTitle = ref('')
const loading = ref(false)
const selectedDeptList = ref([])
const emits = defineEmits(['getDeptList', 'handleSelectedDept', 'close'])
const props = defineProps({
  isOpen: Boolean,
})
const data = reactive({
  queryParams: {
    name: '',
    pageNum: 1,
    pageSize: 10,
  }
})
const {queryParams} = toRefs(data)
watch(() => props.isOpen, (newValue) => {
  if (newValue) {
    loading.value = true
    deptDialogOpen.value = true
    getDeptList()
  } else {
    deptDialogOpen.value = false
  }
})

const closeDialog = () => {
  emits('close')
}

/** 搜索按钮操作 */
function handleQuery() {
  getDeptList()
}

/** 重置按钮操作 */
function resetCloneQuery() {
  proxy.resetForm("deptQueryRef")
  queryParams.value = {
    name: '',
    pageNum: 1,
    pageSize: 10,
  }
  getDeptList()
}

function getDeptList() {
  emits('getDeptList', queryParams.value, (res) => {
    loading.value = false
    deptList.value = res.list
    deptTotal.value = res.total
    deptDialogTitle.value = res.dialogTitle
  })
}

const handleSelectionChange = (val) => {
  selectedDeptList.value = val
}

function selectedDept() {
  if (selectedDeptList.value.length === 0) {
    proxy.$modal.alert('请先勾选所需的部门')
    return false
  }
  emits('handleSelectedDept', selectedDeptList.value)
}
</script>

<template>
  <!-- 选择部门对话框 -->
  <el-dialog :title="deptDialogTitle" v-model="deptDialogOpen" @close="closeDialog" width="800px" append-to-body :close-on-click-modal="false">
    <el-row>
      <el-col :span="24" :xs="24">
        <el-form @submit.native.prevent :model="queryParams" ref="deptQueryRef" :inline="true" label-width="68px">
          <el-form-item label="部门名称" prop="name">
            <el-input
                v-model="queryParams.name"
                placeholder="请输入部门名称"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetCloneQuery">重置</el-button>
            <el-button type="success" icon="Check" @click="selectedDept">确定</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-table v-loading="loading" :data="deptList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column label="部门名称" key="name" prop="name" :show-overflow-tooltip="true" />
      </el-table>
      <pagination
          v-show="deptTotal > 0"
          :total="deptTotal"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getDeptList"
      />
    </el-row>

  </el-dialog>

</template>

<style scoped lang="scss">

</style>